<template>
	<view class="page">
		<view class="signPrompt">
			<view class="signPrompt-title">
				待您签署
			</view>
			<view class="signPrompt-p">
				请于 07月19日 18:36 前完成签署，否则借条将失效
			</view>
		</view>
		<view class="both-parties-the-loan">
			<view class="">
				<image src="/static/image/tx.png" mode=""></image>
				<view class="">
					<span>小明</span>
					<span>15211111111</span>
				</view>
			</view>
			<view class="" style="display: flex;flex-direction: column;align-items: center; justify-content: center;">
				<image class="arrow" src="/static/image/icon-arrow.png" mode=""></image>
				<text class="lendItOut">出借给</text>
			</view>
			<view class="">
				<image src="/static/image/tx1.png" mode=""></image>
				<view class="">
					<span>王华</span>
					<span>15211111111</span>
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view class="code">
				合同编号：NO.ES0129730930951721298992
			</view>
			<view class="lender">
				<text class="status">待签署</text>
				<view class="">
					<span>出借人</span>
					<span>小明</span>
				</view>
				<view class="">
					<span>手机号码</span>
					<span>151111111111</span>
				</view>
				<view class="">
					<span>身份证号</span>
					<span>210222222222222222</span>
				</view>
			</view>
			<view class="borrower">
				<text class="status" :class="{'status-act': true}">已签署</text>
				<view class="">
					<span>借款人</span>
					<span>小明</span>
				</view>
				<view class="">
					<span>手机号码</span>
					<span>151111111111</span>
				</view>
				<view class="">
					<span>身份证号</span>
					<span>210222222222222222</span>
				</view>
			</view>
			<view class="loanRelat">
				<view class="">
					<span>借款金额</span>
					<span>10000元</span>
				</view>
				<view class="">
					<span>借款期间</span>
					<span>2024-07-31 至 2024-08-12</span>
				</view>
				<view class="">
					<span>借款事由</span>
					<span>生产经营</span>
				</view>
				<view class="">
					<span>利息</span>
					<span>0</span>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button class="abandoning-contract" type="default" @click="giveUpSignContract">放弃签约</button>
			<button class="sure-contract" type="primary" @click="sureSignContract">确认并签署</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			/** 放弃签约 */
			giveUpSignContract() {

			},
			/** 确认签约 */
			sureSignContract() {
				uni.navigateTo({
					url: "/pages/index/previewPromissoryNote"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.signPrompt {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			border-radius: 8rpx 8rpx 0 0;
			background: linear-gradient(to right, #C7D9FD, #E1EEFE);
			display: flex;
			flex-direction: column;

			.signPrompt-title {
				font-size: 40rpx;
				font-weight: 700;
			}

			.signPrompt-p {
				color: #626262;
				font-size: 28rpx;
				line-height: 64rpx;
			}
		}

		.both-parties-the-loan {
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(to right, #E5F8FE, #FDF5DE);
			padding: 20rpx 32rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 0 0 8rpx 8rpx;
			box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.4);

			&>view {
				flex: 1;
				display: flex;
				align-items: center;

				.lendItOut {
					font-size: 24rpx;
				}

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				image.arrow {
					height: 20rpx;
					margin-right: 0;
				}

				&>view {
					flex: 1;

					span:last-child {
						color: #626262;
						font-size: 24rpx;
						line-height: 56rpx;
					}
				}
			}
		}

		.detail-box {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.4);
			border-radius: 8rpx;
			margin-top: 20rpx;

			.code {
				font-size: 24rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #E5F8FE;
			}

			.lender,
			.borrower,
			.loanRelat {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #E5F8FE;
				position: relative;

				.status {
					position: absolute;
					top: 20rpx;
					right: 0;
					padding: 4rpx 16rpx;
					font-size: 22rpx;
					color: #fff;
					background: #B0B7BD;

					&.status-act {
						background: #74D671;
					}
				}

				&>view {
					span {
						text-align: left;
						font-size: 28rpx;
						line-height: 56rpx;
					}

					span:first-child {
						color: #aaa;
						display: inline-block;
						width: 180rpx;

					}
				}
			}
		}

		.btn-box {
			display: flex;
			width: 100%;
			background-color: #fff;
			padding: 20rpx;
			margin-top: 20rpx;

			button {
				flex: 1;
				margin: 0 8rpx;
			}

			.abandoning-contract {
				border: 2rpx solid #2F6DFE;
				color: #2F6DFE;
			}
		}
	}
</style>